<!--<template>-->
<!--    <div style="">-->
<!--        <el-button type="" @click="publish">发布</el-button>-->
<!--        <div>-->
<!--            <el-dialog-->
<!--                    style=";z-index: 10!important; "-->
<!--                    title="提示"-->
<!--                    :visible.sync="dialogVisible"-->
<!--                    width="30%"-->
<!--                    @close="handleClose">-->
<!--                <span>这是一段信息</span>-->
<!--                <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!--  </span>-->
<!--            </el-dialog>-->
<!--        </div>-->
<!--        <div id="div1" v-if="show" style=";z-index: 1!important;height: 600px;width: 1200px"></div>-->

<!--    </div>-->
<!--</template>-->

<!--<script>-->
<!--    import 'highlight.js/styles/monokai-sublime.css'-->
<!--    import hljs from "highlight.js";-->
<!--    import E from "wangeditor"-->

<!--    export default {-->
<!--        name: "Write",-->
<!--        data() {-->
<!--            return {-->
<!--                dialogVisible: false,-->
<!--                show:true-->
<!--            }-->
<!--        },-->
<!--        methods: {-->
<!--            publish() {-->
<!--                this.dialogVisible = true;-->
<!--                    // this.show=true-->
<!--            },-->
<!--            handleClose(){-->
<!--                this.show=true-->
<!--                this.dialogVisible=false;-->
<!--            }-->
<!--        },-->
<!--        created() {-->
<!--            console.log(this.$route.query.id);-->
<!--        },-->
<!--        mounted() {-->
<!--            const editor = new E('#div1')-->
<!--            editor.config.uploadFileName = 'file'-->
<!--            editor.config.uploadVideoName = 'file'-->
<!--            // 配置 server 接口地址-->
<!--            editor.config.uploadVideoServer = 'http://localhost:8888/blog/uploadvideo'-->
<!--            // 配置 server 接口地址-->
<!--            editor.config.uploadImgServer = 'http://localhost:8888/blog/upload'-->
<!--            // 挂载highlight插件-->
<!--            editor.config.height = 1200-->

<!--            editor.highlight = hljs-->
<!--            // 配置颜色（文字颜色、背景 色）-->
<!--            editor.config.colors = [-->
<!--                '#000000',-->
<!--                '#eeece0',-->
<!--                '#1c487f',-->
<!--                '#4d80bf',-->
<!--                '#F74E4E',-->
<!--                '#20CE9B'-->
<!--            ]-->
<!--            // 配置字体-->
<!--            editor.config.fontNames = [-->
<!--                // 对象形式 v4.6.16-->
<!--                {name: "黑体", value: "黑体"},-->
<!--                {name: "绝绝字体", value: "Times New Roman"},-->
<!--                // 字符串形式-->
<!--                '黑体',-->
<!--                '仿宋',-->
<!--                '楷体',-->
<!--                '标楷体',-->
<!--                '华文仿宋',-->
<!--                '华文楷体',-->
<!--                '宋体',-->
<!--                '微软雅黑',-->
<!--                'Arial',-->
<!--                'Tahoma',-->
<!--                'Verdana',-->
<!--                'Times New Roman',-->
<!--                'Courier New',-->
<!--            ]-->
<!--            editor.create()-->
<!--            // editor.config.uploadImgShowBase64 = true-->
<!--        },-->
<!--    }-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->
<template>
    <div>
        <div style="height: 85px">
            <div style="display: flex;margin: 0 auto;position: relative"><h1></h1>
                <div style="position: absolute;right: 300px">
                    <el-button @click="publish">修改</el-button>
                    <!--                    <el-button @click="add">新增</el-button>-->
                    <el-button>取消</el-button>
                    <el-button type="primary" @click="back()">返回</el-button>
                </div>
            </div>
        </div>
        <!--        富文本-->
        <el-dialog

                title="产品介绍"
                :visible.sync="dialogVisible"
                width="48%"
                :before-close="handleClose">
            <el-form :model="form" :rules="rules" ref="formRef" class="demo-ruleForm">
                <!--                标题-->
                <!--                <el-form-item label="标题" prop="title">-->
                <!--                    <el-input-->
                <!--                            type="input"-->
                <!--                            :rows="10"-->
                <!--                            placeholder="请输入内容"-->
                <!--                            v-model="form.title">-->
                <!--                    </el-input>-->
                <!--                </el-form-item>-->

                <!--                介绍-->
                <el-form-item label="介绍" prop="description">
                    <el-input
                            type="input"
                            :rows="10"
                            placeholder="请输入内容"
                            v-model="form.description">
                    </el-input>
                </el-form-item>
                <!--                分类-->

                <!--标签-->


                <!--                图片上传-->
                >
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose('formRef')">取 消</el-button>
            <el-button type="primary" @click="add('formRef')">确 定</el-button>
          </span>
        </el-dialog>
        <!--        附加信息-->

        <div style="display: flex;justify-content: center;margin-top: 10px;height: 80vh">
            <div id="div1" style="width: 80%;height: 80vh;z-index: 1">
            </div>
        </div>

    </div>
</template>

<script>
    import E from 'wangeditor'
    // import jwtDecode from "jwt-decode";
    import hljs from 'highlight.js'
    // import jwtDecode from 'jwt-decode'
    import 'highlight.js/styles/monokai-sublime.css'
    // const editor = new E('#div1')
    let editor;  // 全局变量
    export default {
        name: "Edit",

        methods: {

            async getProductDetail() {
                let id = this.$route.query.id
                const {data: res} = await this.$http.get('/admin/product/detail/' + id)
                console.log(res);
                editor.txt.html(res.data.content) // 重新设置编辑器内容
                this.form.description = res.data.description;
            },
            publish() {  //  发布文章
                // let token = localStorage.getItem('token')
                // if (!token) {
                //     this.$message.error('请先登录')
                //     return;
                // }
                var content = null;

                this.form.content = editor.txt.html();
                this.dialogVisible = true;

            },
            add(formRef) { //
                this.dialogVisible = true;
                // console.log(formAddRef);
                this.form.id = this.$route.query.id
                this.$refs[formRef].validate(async (valid) => { // 前端校验
                        if (1) {
                            const {data: res} = await this.$http.put('/admin/product/detail', this.form)

                            if (res.meta.status === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加商品细节成功'
                                })
                                this.dialogVisible = false;
                                // this.form.tagIds = [];
                                this.form = {};
                                editor.txt.clear() // 清空富文本的内容
                                this.$router.push('/product');
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.meta.msg
                                })
                                this.dialogVisible = false;
                            }
                        } else {
                            this.$message({
                                type: 'error',
                                message: '请检查！'
                            })
                            return false;
                        }
                        // this.$message.error('222')
                    }
                );
                // this.dialogVisibleAdd = true;
                this.$refs[formRef].resetFields();
            },
            handleClose(formRef) { //对话框取消
                this.dialogVisible = false;
                this.$refs[formRef].resetFields();


            },
            back() { // 返回首页
                this.$router.go(-1)
            },
            changeValue(item) {
                console.log(item)
                // this.form.tagIds.push(item.tagId)
            }
        },

        data() {
            return {
                checkList: ['选中且禁用', '复选框 A']
                ,
                dialogVisible: false, // 富文本,
                form: {
                    userId: "",
                    content: "",
                    // content: "",
                    description: '',
                    title: '',
                    tagIds: [],
                    typeId: ""
                },
                type: [],
                tag: [],
                // rules: { // 自定义规则
                //     description: [
                //         {required: true, message: '介绍不能为空', trigger: 'blur'},
                //         // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                //     ], title: [
                //         {required: true, message: '标题不能为空', trigger: 'blur'},
                //         // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                //     ],
                //     type: [
                //         {required: true, message: '请选择活动区域', trigger: 'change'}
                //     ],
                //     tag: [
                //         {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                //     ],
                // }
            }
        }, created() {
            // this.getType();
            // this.getTag();
            this.getProductDetail();
        },
        mounted() {
            editor = new E('#div1')
            editor.config.uploadFileName = 'file'
            editor.config.uploadVideoName = 'file'
            // 配置 server 接口地址
            editor.config.uploadVideoServer = 'http://localhost:8888/blog/uploadvideo'
            // 配置 server 接口地址
            editor.config.uploadImgServer = 'http://localhost:8888/blog/upload'
            // 挂载highlight插件
            editor.config.height = 1200

            editor.highlight = hljs
            // 配置颜色（文字颜色、背景色）
            editor.config.colors = [
                '#000000',
                '#eeece0',
                '#1c487f',
                '#4d80bf'
            ]
            // 配置字体
            editor.config.fontNames = [
                // 对象形式 v4.6.16
                {name: "黑体", value: "黑体"},
                {name: "绝绝字体", value: "Times New Roman"},
                // 字符串形式
                '黑体',
                '仿宋',
                '楷体',
                '标楷体',
                '华文仿宋',
                '华文楷体',
                '宋体',
                '微软雅黑',
                'Arial',
                'Tahoma',
                'Verdana',
                'Times New Roman',
                'Courier New',
            ]
            editor.create()
            // editor.config.uploadImgShowBase64 = true
        },
    }
</script>

<style lang="less" scoped>

</style>